<template>
  <a-card>
    <!-- <a-button
      type="primary"
      @click="toSubmit()"
    >保存</a-button> -->

    <div style="width:100%">
      <div id="firstDe">
        <!-- <div>
          <a-row class="title">工艺材料单</a-row>
          <a-row>
            <a-col :span="5" class="left">款号</a-col>

            <a-col :span="7" class="right">{{ styleid }}</a-col>

            <a-col :span="5" class="left">样衣号</a-col>
            <a-col :span="7" class="right"> {{ designid }}</a-col>

          </a-row>
        </div> -->
        <div id="topHeight">
          <a-row style="border: 1px solid #f5f5f5;overflow: hidden;">
            <a-col :span="7">
              <a-row class="lastTitle">
                单位:cm
              </a-row>
              <div style="width:100%">
                <div
                  style="z-index: 100;top: 114px;left: 261px;background: #fff;position: fixed;width: calc(100% - 323px);"
                  v-if="ifShowSize">
                  <a-row>
                    <a-col :span="7">
                      <a-row>
                        <a-col :span="2" class="contentT">
                          <!-- <a-checkbox @change="changeAll"> </a-checkbox> -->
                        </a-col>
                        <a-col :span="3" class="contentT">
                          序号
                        </a-col>
                        <a-col :span="6" class="contentT" style="overflow: hidden;">
                          号型/部位
                        </a-col>
                        <a-col :span="13" class="contentT">
                          成衣测量说明
                        </a-col>
                      </a-row>
                    </a-col>
                    <a-col :span="7">
                      <a-row>
                        <div style="display:flex;flex-wrap:wrap">
                          <div v-for="item, i in list" :key="i" class="contentH" :style="{
                            width: `${100 / list.length}%`,
                            background: (['APN 73', 'LESS', 'LESS工服','JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                          }">
                            {{ item.sizeid }}
                          </div>
                        </div>
                      </a-row>
                      <a-row>
                        <div style="display:flex;flex-wrap:wrap">
                          <div v-for="item, i in list" :key="i" class="contentM"
                            :style="{ width: `${100 / list.length}%` }">
                            <div>{{ item.model }}</div>
                          </div>
                        </div>
                      </a-row>
                    </a-col>
                    <a-col :span="7">
                      <a-row>
                        <div style="display:flex;flex-wrap:wrap">
                          <div v-for="item, i in list" :key="i" class="contentH" :style="{
                            width: `${100 / list.length}%`,
                            background: (['APN 73', 'LESS','LESS工服', 'JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                          }">
                            {{ item.sizeid }}
                          </div>
                        </div>
                      </a-row>
                      <a-row>
                        <div style="display:flex;flex-wrap:wrap">
                          <div v-for="item, i in list" :key="i" class="contentM"
                            :style="{ width: `${100 / list.length}%` }">
                            <div> {{ item.model }}</div>
                          </div>
                        </div>
                      </a-row>
                    </a-col>
                    <a-col :span="3">
                      <a-row class="contentH">
                      </a-row>
                    </a-col>
                  </a-row>

                </div>
              </div>
              <a-row>
                <a-col :span="2" class="contentT">
                  <!-- <a-checkbox @change="changeAll"> </a-checkbox> -->
                </a-col>
                <a-col :span="3" class="contentT">
                  序号
                </a-col>
                <a-col :span="6" class="contentT">
                  号型/部位
                </a-col>
                <a-col :span="13" class="contentT">
                  成衣测量说明
                </a-col>
              </a-row>
              <a-row>

                <a-row v-for="item in partList" :key="item.id">
                  <a-col :span="2" class="contentH">
                    <a-checkbox :checked="item.isSync == 'Y' ? true : false" @change="(e) => onChange(e, item, 'check')">
                    </a-checkbox>
                  </a-col>
                  <a-col :span="3" class="contentH" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                    <a-input v-model="item.seq" class="inputRight" type="number" @focus="onFocus"
                      :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" @blur="(e) => onChange(e, item)" />
                  </a-col>
                  <a-col :span="6" class="contentH" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                    <!-- <span v-if="!item.ifNew">{{item.part}}</span> -->
                    <a-input v-model="item.part" @focus="onFocus"
                      :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" @blur="(e) => onChange(e, item)" />
                  </a-col>
                  <a-col :span="13" class="contentE" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                    <!-- <span v-if="!item.ifNew"> {{item.clff}}</span> -->
                    <a-textarea v-model="item.clff" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }"
                      style="line-height: 16px;resize: none;" @focus="onFocus" @blur="(e) => onChange(e, item)">
                    </a-textarea>
                  </a-col>
                </a-row>
              </a-row>
            </a-col>
            <a-col :span="14">
              <a-row>
                <a-col :span="12">
                  <a-row class="lastTitle">
                    纸样尺寸
                  </a-row>

                  <a-row>
                    <div style="display:flex;flex-wrap:wrap">
                      <div v-for="item, i in list" :key="i" class="contentH" :style="{
                        width: `${100 / list.length}%`,
                        background: (['APN 73', 'LESS','LESS工服', 'JNBY', 'JNBY工服','CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                      }">
                        {{ item.sizeid }}
                      </div>
                    </div>
                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap">
                      <div v-for="item, i in list" :key="i" class="contentM" :style="{ width: `${100 / list.length}%` }">
                        <div>{{ item.model }}</div>
                      </div>
                    </div>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row class="lastTitle">
                    成衣尺寸
                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap">
                      <div v-for="item, i in list" :key="i" class="contentH" :style="{
                        width: `${100 / list.length}%`,
                        background: (['APN 73', 'LESS', 'LESS工服','JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                      }">
                        {{ item.sizeid }}
                      </div>
                    </div>
                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap">
                      <div v-for="item, i in list" :key="i" class="contentM" :style="{ width: `${100 / list.length}%` }">
                        <div> {{ item.model }}</div>
                      </div>
                    </div>

                  </a-row>
                </a-col>
              </a-row>
              <a-row>
                <div style="display:flex;flex-wrap:wrap" v-for="item in partList" :key="item.id">
                  <div v-for="subitem in list" :key="subitem.sizeid" class="contentH"
                    :style="{ width: `${50 / list.length}%` }">
                    <div v-for="x, i in item.info[1].detail" :key="i"
                      :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" tabindex="-1">
                      <a-input v-if="x.sizeId == subitem.sizeid" v-model="x.sizeNum" tabindex="0"
                        :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" @focus="onFocus"
                        @blur="(e) => onChange(e, item)" class="inputRight" type="number" />
                    </div>

                  </div>

                  <div v-for="subitem, index in list" :key="index" class="contentH"
                    :style="{ width: `${50 / list.length}%` }">
                    <div
                      v-if="(['APN 73', 'LESS','LESS工服', 'JNBY','JNBY工服', 'CROQUIS'].includes(brand) && subitem.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(subitem.sizeid)) || (brand == '童装' && ['30', '27'].includes(subitem.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(subitem.sizeid)) || (brand == '婴童' && xl != '连体衣' && subitem.sizeid == '24')">
                      <div v-for="x, i in item.info[0].detail" :key="i"
                        :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                        <a-input v-if="x.sizeId == subitem.sizeid" v-model="x.sizeNum"
                          :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" class="inputRight"
                          @blur="changeYellow(item, x)" type="number" />
                      </div>
                    </div>
                    <div v-else v-for="x, i in item.info[0].detail" :key="i"
                      :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                      <a-input v-if="x.sizeId == subitem.sizeid" v-model="x.sizeNum" class="inputRight" @focus="onFocus"
                        :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" @blur="(e) => onChange(e, item)"
                        type="number" />
                    </div>
                  </div>
                </div>
              </a-row>
            </a-col>
            <!-- <a-col :span="7">
              <a-row class="lastTitle">
                成衣尺寸
              </a-row>
              <a-row>
                <div style="display:flex;flex-wrap:wrap">
                  <div v-for="item, i in list" :key="i" class="contentH" :style="{
                    width: `${100 / list.length}%`,
                    background: (['APN 73', 'LESS', 'JNBY', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                  }">
                    {{ item.sizeid }}
                  </div>
                </div>
              </a-row>
              <a-row>
                <div style="display:flex;flex-wrap:wrap">
                  <div v-for="item, i in list" :key="i" class="contentM" :style="{ width: `${100 / list.length}%` }">
                    <div> {{ item.model }}</div>
                  </div>
                </div>

              </a-row>
              <a-row>
                <div style="display:flex;flex-wrap:wrap" v-for="item, i in partList" :key="i">
                  <div v-for="subitem, index in list" :key="index" class="contentH" :style="{
                    width: `${100 / list.length}%`,
                    background: (['APN 73', 'LESS', 'JNBY', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                  }">
                    <div
                      v-if="(['APN 73', 'LESS', 'JNBY', 'CROQUIS'].includes(brand) && subitem.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(subitem.sizeid)) || (brand == '童装' && ['30', '27'].includes(subitem.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(subitem.sizeid)) || (brand == '婴童' && xl != '连体衣' && subitem.sizeid == '24')">
                      <div v-for="x, i in item.info[0].detail" :key="i"
                        :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                        <a-input v-if="x.sizeId == subitem.sizeid" v-model="x.sizeNum"
                          :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" class="inputRight"
                          @blur="changeYellow(item, x)" type="number" />
                      </div>
                    </div>
                    <div v-else>
                      <div v-for="x, i in item.info[0].detail" :key="i"
                        :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                        <a-input v-if="x.sizeId == subitem.sizeid" v-model="x.sizeNum" class="inputRight" @focus="onFocus"
                          :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" @blur="(e) => onChange(e, item)"
                          type="number" />
                      </div>
                    </div>
                  </div>
                </div>
              </a-row>
            </a-col> -->
            <a-col :span="3">
              <a-row class="lastTitle">
                偏差
              </a-row>
              <a-row class="contentH">
              </a-row>
              <a-row class="contentH">
              </a-row>
              <a-row v-for="item in partList " :key="item.id" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }"
                class="contentH">
                <a-input v-model="item.diff" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" class="inputRight"
                  type="number" @focus="onFocus" @blur="(e) => onChange(e, item)" />
              </a-row>
            </a-col>
          </a-row>
        </div>
      </div>
      <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="addLine">
        <a-icon type="plus" />添加尺寸
      </a-button>
    </div>
  </a-card>
</template>
<script>
import { getSizeList, getBillSize, saveSize, updateSize, getJumpSize } from '@api/rd/index'

export default {
  props: {
    sampleCode1: {
      type: String,
      default: null,
      require: false
    },
    id1: {
      type: Number,
      default: null,
      require: false
    },
    xl: {
      type: String,
      default: null,
      require: false
    },
    brand: {
      type: String,
      default: null,
      require: false
    }
  },
  data() {
    return {
      list: [],
      styleid: '',
      designid: '',
      partList: [],
      billId: '',
      backid: '',
      ifNew: false,
      ifShowSize: false,
      focusvalue: ''
    }
  },
  computed: {
    sampleCode() {
      return this.$route.query.sampleCode || ''
    },
    id() {
      return this.$route.query.id || ''
    },
    billNo() {
      return this.$route.query.billNo || ''
    },
    // xl() {
    //   return this.$route.query.xl || ''
    // },
    // brand() {
    //   return this.$route.query.brand || ''
    // },
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    this.getSize()
    if (!this.xl) {
      this.xl = this.$route.query.xl
    }
    if (!this.brand) {
      this.brand = this.$route.query.brand
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll1)
  },
  // 组件销毁前
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll1)
  },
  methods: {
    handleScroll1() {
      // 页面滑动的距离
      const object = document.getElementById('topHeight');
      const scrollTop = object.getBoundingClientRect().top;
      // 当页面滑动的距离大于300px时元素显示，否则不显示
      if (scrollTop <= 0) {
        this.ifShowSize = true
      } else {
        this.ifShowSize = false
      }
    },
    async getSize() {
      const params = {
        sampleCode: this.sampleCode ? this.sampleCode : this.sampleCode1
      }
      try {
        const res = await getSizeList('c17', params)
        if (res.code == 200) {
          this.list = res.data
          this.list.map((item) => {
            item.model = item.model.replace("/", "\n")
          })
          if (res.data[0]) {
            this.styleid = res.data[0].styleid
            this.designid = res.data[0].designid
          }
          this.getBill()
          // console.log(this.list);
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺尺寸单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺尺寸单失败！')
      }
    },
    onFocus(e) {
      this.focusvalue = e.target.value
    },
    async changeAll(e) {
      if (e.target.checked) {
        this.partList.map((item) => {
          item.isSync = 'Y'
        })
      } else {
        this.partList.map((item) => {
          item.isSync = ''
        })
      }
      try {
        const res = await updateSize('size', this.partList)
        if (res.code == 200) {
          // this.$message.success('保存成功！')
          this.getBill()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('保存失败！')
          }
        }
      } catch (error) {
        this.$message.error('保存失败！')
      }
    },
    async onChange(e, item, type) {
      if (type) {
        item.isSync = e.target.checked ? 'Y' : ''
      }
      if (this.focusvalue != e.target.value && item.seq && item.part) {
        const { realname } = this.userInfo
        const params = item
        params.operator = realname
        try {
          const res = item.ifNew ? await saveSize('size', params) : await updateSize('size', params)
          if (res.code == 200) {
            // this.$message.success('保存成功！')
            this.getBill()
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('保存失败！')
            }
          }
        } catch (error) {
          this.$message.error('保存失败！')
        }
      }
    },
    addLine() {
      // if (this.partList.length) {
      //   const newArr = []
      //   newArr =JSON.parse(this.partList[0].info)
      //   newArr.map(item => {
      //     item.detail.map(subitem => {
      //       subitem.sizeNum = ''
      //     })
      //   })
      //   const obj = {
      //     billId: this.billId,
      //     clff: '',
      //     ifNew: true,
      //     id: this.backid,
      //     part: '',
      //     seq: '',
      //     isSync: 'Y',
      //     info: newArr
      //   }
      //   this.partList.push(obj)
      //   this.ifNew = true
      //   console.log(this.partList);
      // } else {
        const newArr = []
        const detail = []
        this.list.map((item) => {
          const obj = {
            sizeId: item.sizeid,
            sizeNum: null
          }
          detail.push(obj)
        })
        const zyobj = {
          type: '纸样',
          detail: detail
        }
        const cyobj = {
          type: '成衣',
          detail: detail
        }
        newArr.push(cyobj)
        newArr.push(zyobj)
        const obj = {
          billId: this.id ? this.id : this.id1,
          clff: '',
          ifNew: true,
          id: '',
          part: '',
          seq: '',
          isSync: 'Y',
          info: newArr
        }
        this.partList.push(obj)
        this.ifNew = true
        console.log(this.partList);
      // }
    },
    async changeYellow(item, subitem) {
      console.log(item, subitem)
      const { realname } = this.userInfo
      let obj = {
        id: item.id,
        sizeid: subitem.sizeId,
        operator: realname,
        sizenum: subitem.sizeNum
      }
      this.getJump(obj)
    },
    async getJump(params) {
      try {
        const res = await getJumpSize('size', params)
        if (res.code == 200) {
          this.partList.map(item => {
            if (item.id == params.id) {
              item.info[0].detail = res.data.jumpSizeDetailVoList
              item.diff = res.data.diff
            }
          })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('操作失败！')
          }
        }
      } catch (error) {
        this.$message.error('操作失败！')
      }
    },
    async toSubmit() {
      console.log(this.partList)
      const { realname } = this.userInfo
      const params = []
      this.partList.map(item => {
        const obj = {
          billId: item.billId,
          clff: item.clff,
          id: item.id,
          operator: realname,
          part: item.part,
          info: item.info,
          seq: item.seq
        }
        params.push(obj)
      })
      console.log(params)

      try {
        const res = this.ifNew ? await saveSize('size', params) : await updateSize('size', params)
        if (res.code == 200) {
          this.$message.success('保存成功！')
          this.getBill()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('保存失败！')
          }
        }
      } catch (error) {
        this.$message.error('保存失败！')
      }
    },
    async getBill() {
      const params = {
        billId: this.id ? this.id : this.id1
        // billNo: this.billNo
      }
      try {
        const res = await getBillSize('size', params)
        if (res.code == 200) {
          this.partList = res.data
          if (this.partList.length) {
            this.billId = this.partList[0].billId
            this.backid = this.partList[0].id
          }
          this.partList.map((x) => {
            x.info.map((y) => {
              if (!y.detail.length) {
                this.list.map((z) => {
                  const obj = {
                    diff: null,
                    remark: '',
                    sizeId: z.sizeid,
                    sizeNum: '',
                  }
                  y.detail.push(obj)
                })
              }
            })
          })
          // console.log(this.partList)
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位失败！')
      }
    }
  }
}
</script>
<style scoped>
.contentH {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  font-weight: 500;
}

.contentE {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px !important;
  text-align: center;
  font-weight: 500;
}

.contentT {
  border: 1px solid #f5f5f5;
  height: 80px;
  font-size: 16px;
  text-align: center;
  line-height: 80px;
  font-weight: 500;
}

.contentM {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px;
  text-align: center;
  white-space: pre-line;
  /* line-height: 40px; */
  font-weight: 500;
}

.lastTitle {
  font-size: 18px;
  font-weight: 500;
  background: #fafafa;
  line-height: 60px;
  border: 1px solid #f5f5f5;
  height: 60px;
  text-align: center;
}

.left {
  height: 53px;
  background-color: #fafafa;
  text-align: center;
  border: 1px solid #f5f5f5;
  line-height: 53px;
  font-size: 18px;
  font-weight: 500;
}

.right {
  height: 53px;
  text-align: center;
  border: 1px solid #f5f5f5;
  line-height: 53px;
  font-size: 16px;
  font-weight: 500;
}

.title {
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 24px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
</style>
<style>
#firstDe .ant-input {
  border: none !important;
}
</style>
<style>
.inputRight input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

.inputRight input[type='number'] {
  -moz-appearance: textfield;
}
</style>